<template>
  <div class="wrap">
    <div class="p1">首页</div>
    <div class="boy">
      <el-row :gutter="10">
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <div class="grid-content bg-purple"  @click="userTodo">
            <p>{{ orderCount }}</p>
            <div><i class="el-icon-user">用户总数</i></div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <div class="grid-content bg-purple-conent"  @click="productTodo">
            <p>{{ productCount }}</p>
            <div><i class="el-icon-menu">商品总数</i></div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <div class="grid-content bg-purple-light"  @click="orderTodo">
            <p>{{ userCount }}</p>
            <div><i class="el-icon-success">订单总数</i></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getindex } from "@/utils/request.js";
export default {
  name: "MyHome",
  data() {
    return {
      username: "",
      orderCount: "",
      productCount: "",
      userCount: "",
    };
  },
  created() {
    this.getlog();
  },
  methods: {
    getlog() {
      getindex().then((res) => {
        // console.log(res);
        this.username = res.data.username;
        this.orderCount = res.data.orderCount;
        this.productCount = res.data.productCount;
        this.userCount = res.data.userCount;
      });
    },
    userTodo() {
      this.$router.push("/user");
    },
    productTodo() {
      this.$router.push("/product");
    },
    orderTodo() {
      this.$router.push("/order");
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.wrap {
  .p1 {
    text-align: left;
    font-size: 40px;
    margin: 10px 0 20px 0;
  }
  .boy {
    .el-col {
      border-radius: 4px;
    }
    .bg-purple {
      background: #f1b45f;
      height: 160px;
      margin-right: 20px;
      color: white;
      padding: 1px;
    }
    .bg-purple:hover {
      transform: scale(1.1);
      color: #000;
    }
    .bg-purple-conent {
      background: #6cbe6c;
      height: 160px;
      margin-right: 20px;
      color: white;
      padding: 1px;
    }
    .bg-purple-conent:hover {
      transform: scale(1.1);
      color: #000;
    }
    .bg-purple-light {
      background: #5db8d3;
      height: 160px;
      color: white;
      padding: 1px;
    }
    .bg-purple-light:hover {
      transform: scale(1.1);
      color: #000;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    p {
      font-size: 50px;
      margin-top: 30px;
    }
    div {
      font-size: 20px;
      margin-top: 20px;
    }
  }
}
</style>
